import React from "react";
import {Picker, StyleSheet, Text, View} from "react-native";

export class SelectFormData{
    label:string = '';
    value:string = '';

    constructor(label: string, value: string) {
        this.label = label;
        this.value = value;
    }
}

type SelectFormProp = {
    startText:string
    defaultValue?:string
    optionValue:Array<SelectFormData>
    onChangeSelect:(value:string, index:number)=>void
}

type SelectFormState = {
    selectValue:string
}

export default class SelectForm extends React.Component<SelectFormProp, SelectFormState> {
    constructor(props:any) {
        super(props);

        this.state = {
            selectValue:this.props.defaultValue || ''
        }
    }

    onChangeSelect(value:string, index:number){
        this.setState({
            selectValue:value
        });
        this.props.onChangeSelect(value, index);
    }

    render() {
        let selectComponent:any = <Picker
            prompt = '请选择:'
            mode = 'dropdown'
            style={selectFormStyles.picket}
            itemStyle={{}}
            selectedValue = {this.state.selectValue}
            onValueChange = {(value, index)=>{
                this.onChangeSelect(value, index)
            }}>
            {
                this.props.optionValue.map((item) =>{
                    return <Picker.Item
                        key={item.value}
                        label = {item.label}
                        value = {item.value}
                    />
                })
            }
        </Picker>;

        return (
            <View>
                <View style={selectFormStyles.container}>
                    <View style={selectFormStyles.startTextContainer}><Text style={selectFormStyles.startText}>{this.props.startText}</Text></View>
                    <View style={selectFormStyles.picketContainer}>
                        <View style={{flex:1, height:40}} />
                        {selectComponent}
                    </View>
                </View>
            </View>
        )
    }
}



const selectFormStyles = StyleSheet.create({
    container:{
        flexDirection:'row',
        marginTop:4,
        marginBottom:4
    },
    startTextContainer:{
        flexDirection:'row',
        width:92,
        height:40,
        justifyContent:'flex-end',
        alignItems:'center'
    },
    startText:{
        marginRight:4,
        textAlign:'right'
    },
    picketContainer:{
        flexDirection:'row',
        width:92,
        height:40,
        justifyContent:'flex-end',
        alignItems:'center'
    },
    picket:{
        width:140,
        height:40
    },



});
